<template>
  <div>
    <div class="aplayer-list">
      <div class="empty-state" v-if="songList.length === 0">
        <span>播放列表空空如也。。。</span>
      </div>
      <ul
        id="aplayer-list-ul"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled"
        v-loading="aLoading"
      >
        <li v-for="(song,index) in songList" class="song-item" :key="index">
          <span class="aplayer-list-like ri-heart-2-fill ri-xl" @click="likeSong(song)"></span>
          <span class="aplayer-list-download ri-download-2-line ri-xl" @click="downloadSong(song)"></span>
          <span class="aplayer-list-index">{{index + 1}}</span>
          <span class="aplayer-list-title" @click="playSong(index)">{{song.name}}</span>
          <span
            class="aplayer-list-author"
            v-for="(singer,index2) in song.singer"
            :key="index2"
          >{{singer.name}}</span>
        </li>
      </ul>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import $ from "jquery";
import QQMusic from "../../utils/qqmusic";

var _this = null;
export default {
  name: "play-list",
  data() {
    return {
      parent: null,
      songList: [],
      currentSelection: null,
      ap: null,
      currentIndex: 0,
      keyWord: "",
      page: 1,
      pageSize: 20,
      loading: false,
      noMore: false,
      aLoading: false
    };
  },
  computed: {
    disabled() {
      return this.loading || this.noMore;
    }
  },
  created() {},
  mounted() {
    _this = this;
    window.onresize = this.onresize;
    $(document).ready(() => {
      _this.ap = _this.$parent.$refs.ap;
      _this.onresize();
    });
  },
  methods: {
    UpdateList(res) {
      _this.page = res.页;
      if (_this.page === 1) {
        _this.songList = res.音乐列表;
        _this.playSong(0);
      } else {
        _this.songList = _this.songList.concat(res.音乐列表);
      }
      _this.noMore = !res.更多;
      _this.keyWord = res.关键字;
      _this.pageSize = res.页大小;
      _this.aLoading = false;
    },
    获取歌手名称(singer) {
      return new QQMusic().获取歌手名称(singer);
    },
    setCurrentSelection(val) {
      _this.$refs.playerList.setCurrentRow(val);
    },
    handleCurrentChange(song) {
      _this.currentSelection = song;
      var i = _this.songList.indexOf(song);
      if (i === -1) {
        _this.playSong(song);
      } else {
        _this.currentIndex = i;
        _this.playSong(_this.currentIndex);
      }
    },
    async playSong(index) {
      if (typeof index !== "undefine") _this.currentIndex = index;
      _this.setCurrentActive();
      var song = _this.songList[_this.currentIndex];
      var qqmusic = new QQMusic();
      var songUrl = await qqmusic.getSongUrl(song);
      var imgs = qqmusic.getAlbumImg(song.album.mid, song.singer[0].mid);
      _this.parent.currentMusic = {
        name: song.name,
        artist: qqmusic.获取歌手名称(song.singer),
        url: songUrl,
        cover: imgs.albumImgUrl || imgs.singerAvatarUrl,
        lrc: await qqmusic.getLyric(song.id)
      };
    },
    downloadSong(song) {
      this.$msgbox({
        title: `下载歌曲《${song.name}》`,
        showCancelButton: true,
        confirmButtonText:'开始下载'
      }).then(action=>{

      }).catch(()=>{

      });
    },
    setCurrentActive() {
      $("#aplayer-list-ul li").removeClass("song-item-active");
      $(`#aplayer-list-ul li:nth-of-type(${_this.currentIndex + 1})`).addClass(
        "song-item-active"
      );
    },
    Next() {
      _this.currentIndex++;
      if (_this.currentIndex >= _this.songList.length) {
        _this.currentIndex = 0;
      }
      _this.playSong();
    },
    load() {
      _this.loading = true;
      _this.aLoading = true;
      setTimeout(() => {
        new QQMusic()
          .search(_this.keyWord, _this.page + 1, _this.pageSize)
          .then(res => {
            _this.loading = false;
            _this.aLoading = false;
            _this.UpdateList(res);
          });
      }, 1000);
    },
    onresize() {
      var h = document.documentElement.clientHeight - 60 - 66 - 55;
      $(".aplayer-list").height(h);
    }
  }
};
</script>
<style>
p {
  color: #aaa;
  text-align: center;
  border-top-width: 2px;
  border-bottom-width: 2px;
}
.aplayer-list {
  overflow-y: auto;
  margin-left: 10px;
  margin-top: 10px;
}
.aplayer-list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.aplayer-list ul li {
  position: relative;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  font-size: 14px;
  border-top: 1px solid #e9e9e9;
  transition: all 0.2s ease;
  overflow: hidden;
  margin: 0;
}
.aplayer-list-title {
  color: #666;
  cursor: pointer;
}
.aplayer-list-title:hover {
  color: var(--text-hover-color);
}
.aplayer-list-author {
  color: #666;
  float: right;
  cursor: pointer;
  margin-left: 5px;
}
.aplayer-list-author:hover {
  color: var(--text-hover-color);
}
.aplayer-list-download {
  cursor: pointer;
}
.aplayer-list-download:hover {
  color: var(--text-hover-color);
}
.aplayer-list-like,
.aplayer-list-download,
.aplayer-list-time {
  float: right;
  line-height: 50px;
  text-align: center;
  vertical-align: middle;
  padding-left: 5px;
}
.aplayer-list-like {
  cursor: pointer;
}
.aplayer-list-like:hover {
  color: red;
}
.aplayer-list-index {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #ebf0f2;
  border-radius: 100px;
  text-align: center;
  line-height: 30px;
  color: #283149;
  font-weight: 700;
}
.song-item {
  font-size: 14px;
  height: 50px;
  line-height: 50px;
  padding: 0 5px 0 10px;
}
.song-item-active {
  background: cornsilk;
}
.song-item:hover {
  background: #ecf5ff;
}
.empty-state {
  padding-top: 20px;
  text-align: center;
  font-size: 26px;
  font-weight: 500;
}
</style>
